<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title> Yoka365 </title>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

		<link href="http://cdn.bootcss.com/pace/1.0.2/themes/black/pace-theme-center-circle.css" rel="stylesheet" />

		<link href="http://cdn.bootcss.com/ratchet/2.0.2/css/ratchet.min.css" rel="stylesheet">
		<link href="http://cdn.bootcss.com/ratchet/2.0.2/css/ratchet-theme-ios.min.css" rel="stylesheet">
		<style>
		form {
			padding: 10px;
		}
		</style>
	</head>

	<body>
		<header class="bar bar-nav">
		  <h1 class="title" id="showResult">
		  {if $dd}刷卡成功：{$dd}{/if}
		  {if $error}
		  {if 'scaner-not-exists' == $error}刷卡失败：无效的打卡器{elseif 'scaner-token-not-match' == $error}刷卡失败：二维码令牌失效，请重新扫描{else}{$error}{/if}
		  {/if}
			</h1>
			<a class="icon icon-info pull-right" href="#pageChangeName"></a>
		</header>

		<div class="bar bar-standard bar-header-secondary">
			<button class="btn btn-block btn-primary" id="btnScan">点击扫描二维码</button>
		</div>

		<div class="bar bar-standard bar-footer">
			<a href="/wx/user-scan-query?openid={$openid}" class="btn btn-block btn-primary" data-ignore="push">查看打卡记录</a>
		</div>

		<!-- *** *** *** *** *** *** *** *** *** *** *** *** -->
		<div id="pageChangeName" class="modal">
			<header class="bar bar-nav">
				<h1 class="title">请先填写您的名称哦</h1>
				<a class="icon icon-left-nav pull-left" href="#pageChangeName"></a>
			</header>

			<div class="content">
				<form onsubmit="return false;">
					<input type="text" id="inputUserName" placeholder="名称" value="{$userName}">

					<a class="btn btn-block btn-primary" href="#pageChangeName">确定</a>
				</form>
			</div>
		</div>
	</body>
</html>
<script src="http://cdn.bootcss.com/zepto/1.1.4/zepto.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>
var paceOptions = {
  // Disable the 'elements' source
  elements: false,

  // Only show the progress on regular and ajax-y page navigation,
  // not every request
  restartOnRequestAfter: false
};

wx.config({
	debug: false,
	appId: '{$appid}',
	timestamp: {$timestamp},
	nonceStr: '{$nonce}',
	signature: '{$signature}',

	jsApiList: [
		'getLocation',
		'scanQRCode'
	]
});
</script>

<script src="http://cdn.bootcss.com/ratchet/2.0.2/js/ratchet.min.js"></script>
<script src="http://cdn.bootcss.com/fastclick/1.0.3/fastclick.min.js"></script>
<script src="http://cdn.bootcss.com/moment.js/2.8.4/moment.min.js"></script>
<script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<script>
var openid = '{$openid}';
var userNameRaw = '{$userName}';

{literal}
var doPost = function(url, gx, gy){
	Pace.track(function(){
		$.get(url, {gx: gx, gy: gy}, function(data){
			if(data.flag){
				$('#showResult').text('刷卡成功：' + moment(data.time).format('YYYY-MM-DD hh:mm:ss')).show();
			}else{
				$('#showResult').text('刷卡失败：' + data.msg).show();
			}
		});
	});
};

wx.ready(function(){
	FastClick.attach(document.body);

	$('#btnScan').click(function(e){
		$('#showResult').text('').hide();

		var userName = $('#inputUserName').val().trim();
		if(!userName){
			$('#pageChangeName').addClass('active');
			return;
		}

		wx.scanQRCode({
			needResult: 1,
			desc: '扫描二维码',
			success: function(res){
				var url = res.resultStr;
				url += '&openid=' + openid + '&isAjax=true';
				
				if(url.indexOf('http://dy126.net') === -1){
					alert('invalid qr!');
					return;
				}

				// ios url json ""
				url = url.replace('"}}', '');

				if(userNameRaw != userName){
					url += '&userName=' + encodeURIComponent(userName);
				}

				// 获取地理位置
				wx.getLocation({
					success: function(res){
						// 纬度，浮点数，范围为90 ~ -90
						var gx = res.latitude; 
						// 经度，浮点数，范围为180 ~ -180
						var gy = res.longitude; 

						doPost(url, gx, gy);
					}, 

					error: function(){
						doPost(url);
					}
				});
			}
		});
	});
});
{/literal}
</script>
